export const code1 = `
  npm i redux react-redux
  // or
  yarn add redux react-redux
`

export const code2 = `
  // src/redux/store/index.js
  import { createStore } from 'redux'
  import reducer from '../reducer'

  const store = createStore(reducer)



  // src/redux/reducer/index.js
  import { combineReducers } from 'redux'
  import count from './count'

  const rootReducer = combineReducers({
    count
  })
  
  export default rootReducer


  // src/redux/reducer/count.js
  const _state = { count: 1 }

  export default (state, { type, payload }) => {
    switch(type) {
      case ADD_COUNT:
        return {
          ...state,
          count: state.count + payload
        }
      default:
        return state
    }
  }


// src/redux/action/type.js
export const ADD_COUNT = 'addCount'

// src/redux/action/index.js
import { ADD_COUNT } from './type'

export const addCount = (value) => {
  return {
    type: ADD_COUNT,
    payload: value
  }
}
`

export const code3 = `
  import { createRoot } from 'react-dom/client'
  import { Provider } from 'react-redux'
  import { RouterProvider } from 'react-router-dom'
  import store from './redux/store/index.js'
  import router from './router/index.jsx'
  import './index.css'

  createRoot(document.getElementById('root)).render(
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  )
`

export const code4 = `
  import { useSelector, useDispatch } from 'react-redux'
  import { addCount } from '@/redux/action'

  function MyComponent() {
    const count = useSelector(state => state.count.count)
    const dispatch = useDispatch()

    const changeCount = () => {
      dispatch(addCount(1))
    }

    return(
      <div>
        <p>count: { count }</p>
        <button onClick={changeCount}>改变count</button>
      </div>
    )
  }
`

export const code5 = `
  function MyComponent({ someStateFromRedux, connectChangeAge }) {
    const changeCount = () => {
      connectChangeAge(1)
    }

    return(
      <div>
        <p>count: { someStateFromRedux.count.count }</p>
        <button onClick={changeCount}>改变count</button>
      </div>
    )
  }

  const mapStateFromProps = state => ({
    someStateFromRedux: state
  })

  const mapDispatchToProps = dispatch({
    connectChangeAge: data => { dispatch(changeAge(data)) }
  })

  export default connect(mapStateFromProps, mapDispatchToProps)(MyComponent)
`